<template>
  <view :style="{ width: screenHeight + 'px', height: navBarWidth + 'px' }">
    <!-- 使用条件渲染替代动态组件 -->
    <revenue-chart v-if="data.chartType === 'revenue'" :echartData="data.echartData" :reload="reload"
      :echartOpt="echartOpt" @getShawBarInfo="getShawBarInfo" />
    <store-chart v-else-if="data.chartType === 'store'" :echartData="data.echartData" :reload="reload"
      :echartOpt="echartOpt" @getShawBarInfo="getShawBarInfo" />
    <order-chart v-else-if="data.chartType === 'order'" :echartData="data.echartData" :reload="reload"
      :echartOpt="echartOpt" @getShawBarInfo="getShawBarInfo" />
    <cost-chart v-else-if="data.chartType === 'cost'" :echartData="data.echartData" :reload="reload"
      :echartOpt="echartOpt" @getShawBarInfo="getShawBarInfo" />
    <!-- <component
      v-if="data.chartType"
      :is="chartType[data.chartType].component"
      :echartData="data.echartData"
      :reload="reload"
      :echartOpt="echartOpt"
      @getShawBarInfo="getShawBarInfo"
    /> -->
    <dataModal landscape :type="data.chartType" :data="modalData" :cellList="cellList" v-model:model-value="popupValue"
      @changeDate="changeDate" />
  </view>
</template>

<script setup lang="ts">
  import { Chart as RevenueComponent } from '../revenue/components'
  import { Chart as StoreComponent } from '../store/components'
  import { Chart as OrderComponent } from '../order/components'
  import { Chart as CostComponent } from '../cost/components'

  // 注册组件（微信小程序需要显式注册）
  import { defineComponent } from 'vue'
  import dataModal from '../../../components/data-modal.vue'
  import { formatNumber } from '@/utils'

  import { onShow, onUnload } from '@dcloudio/uni-app'
  import { getCurrentInstance, ref } from 'vue'

  const chartType : any = {
    revenue: {
      component: RevenueComponent,
      barTitle: '收益趋势图',
    },
    store: {
      component: StoreComponent,
      barTitle: '门店收益图',
    },
    order: {
      component: OrderComponent,
      barTitle: '订单维度下费用及订单数统计',
    },
    cost: {
      component: CostComponent,
      barTitle: '费用生成时间或结算时间统计订单费用',
    },
  }

  const systemInfo = uni.getSystemInfoSync()
  console.log('🐳 ~ systemInfo:', systemInfo)
  const screenWidth = systemInfo.screenWidth
  const screenHeight = systemInfo.screenHeight
  const statusBarHeight = systemInfo.osName == 'ios' ? 0 : systemInfo.statusBarHeight
  const navBarHeight = statusBarHeight + 44 + 10 + 10
  const navBarWidth = screenWidth - navBarHeight

  const data = ref<any>([])
  const reload = ref(false)
  const echartOpt = ref({
    zoomValue: 12,
    gridLeft: systemInfo.statusBarHeight,
    gridBottom: '15%',
    dataZoom0Show: false,
    preventDefaultMouseMove: true,
  })
  const instance = getCurrentInstance()
  const _this : any = instance?.proxy

  const popupValue = ref(false)
  const modalData = ref({})

  const cellList = ref([{ value: 0, label: '' }])
  const setData2CellList = () => {
    const type = data.value.chartType
    console.log('🐳 ~ setData2CellList ~ type:', type)
    if (type == 'order') {
      cellList.value = [
        {
          label: '总收入',
          value: formatNumber(modalData.value.totalAmount),
        },
        {
          label: '总订单数',
          unit: '单',
          value: modalData.value.count || 0,
        },
      ]
    } else if (type == 'cost') {
      cellList.value = [
        {
          label: '总收入',
          value: formatNumber(modalData.value.totalAmount),
        },
      ]
    } else {
      cellList.value = [
        {
          label: '总收益',
          value: formatNumber(modalData.value.totalProfitAmount),
        },
        {
          label: '总收入',
          value: formatNumber(modalData.value.totalRevenueAmount),
        },
        {
          label: '总支出',
          value: formatNumber(modalData.value.totalExpenditureAmount),
        },
      ]
    }
  }

  const chartDataSource = ref()
  // 切换日期
  const changeDate = (type) => {
    let num = Number(modalData.value.index)
    if (type == 'prev') {
      modalData.value = Object.assign(chartDataSource.value[num - 1], {
        index: num - 1,
        maxLength: chartDataSource.value.length - 1,
      })
    } else if (type == 'next') {
      modalData.value = Object.assign(chartDataSource.value[num + 1], {
        index: num + 1,
        maxLength: chartDataSource.value.length - 1,
      })
    }
    setData2CellList()
  }
  // 获取数据
  const getShawBarInfo = (e) => {
    modalData.value = Object.assign(chartDataSource.value[e.clickIndex], {
      index: e.clickIndex,
      maxLength: chartDataSource.value.length - 1,
    })
    setData2CellList()
    popupValue.value = true
  }

  onShow(() => {
    // #ifdef H5
    if (_this) {
      const eventChannel = _this.getOpenerEventChannel()
      eventChannel.on('LandscapeData', (options : any) => {
        uni.setNavigationBarTitle({
          title: options.barTitle || chartType[options.chartType].barTitle,
        })
        data.value = options
        chartDataSource.value = options.echartData
      })
    }
    // #endif

    // #ifdef APP-PLUS
    uni.showLoading({
      title: '加载中...',
    })

    setTimeout(() => {
      plus.screen.unlockOrientation('portrait-primary')
      plus.screen.lockOrientation('landscape-primary')

      if (_this) {
        const eventChannel = _this.getOpenerEventChannel()
        eventChannel.on('LandscapeData', (options : any) => {
          uni.setNavigationBarTitle({
            title: options.barTitle || chartType[options.chartType].barTitle,
          })
          data.value = options
          chartDataSource.value = options.echartData
        })
      }
      reload.value = true
      uni.hideLoading()
    }, 1200)
    //#endif
  })
  //页面卸载时切换为竖屏配置
  onUnload(() => {
    // #ifdef APP-PLUS
    plus.screen.lockOrientation('portrait-primary') //锁死屏幕方向为竖屏
    // #endif
  })
</script>

<style scoped lang="scss">
  :deep {
    .ve-modal {
      width: 80vw;
      margin-top: -100rpx;
    }

    .data-modal-content {
      max-height: 56vh;
    }

    .data-modal-title {
      padding-bottom: 10px;
    }

    .ve-cell {
      margin: 10rpx 0;
    }

    .ve-modal-close {
      bottom: -100rpx;
    }
  }
</style>
